<template>
  <div class="search_wrap" :class="expendType==='expend' ? 'samll_hieght' : 'big_height'">

    <el-form label-position="top" :inline="true" :model="form" class="demo-form-inline">
      <el-form-item v-for="(item, index) in formData" :key="index" :label="item.title">
        <el-input v-if="item.type == 'input'" v-model="form[item.value]" :placeholder="item.placeholder?item.placeholder:('请输入' + item.title)" :disabled="item.disabled ? item.disabled : false"/>
        <el-date-picker v-if="item.type == 'datetime'" v-model="form[item.value]" type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                        :placeholder="'请输入' + item.title"/>
        <el-date-picker v-if="item.type == 'date'" v-model="form[item.value]" type="datetime"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'请输入' + item.title"/>
        <el-date-picker style="width: 100%" v-if="item.type == 'datetimerange'" v-model="form[item.value]" type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"  :clearable="false"/>
        <el-date-picker style="width: 100%" v-if="item.type == 'dateRange'" v-model="form[item.value]" type="daterange"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" :clearable="false"/>
        <!--        <el-select-->
        <!--            v-else-if="item.type == 'select' && (item.value == 'kjglHylx')"-->
        <!--            v-model="form[item.value]" :placeholder="'请输入' + item.title" @change="getfwlx($event, item.value)" value-key="lxId">-->
        <!--          <el-option v-for="f in item.options" :key="typeof f.value == 'object' ? JSON.stringify(f.value) : f.value" :label="f.label" :value="f.value" />-->
        <!--        </el-select>-->
        <el-select v-else-if="item.type == 'select'" v-model="form[item.value]" :disabled="item.disabled" filterable
                   :placeholder="'请输入' + item.title" @change="selectChange($event, item.value)">
          <el-option v-for="(f,index) in item.options" :key="index" :label="f.label" :value="f.value"/>
        </el-select>
        <el-select v-else-if="item.type == 'multipleselect'" v-model="form[item.value]" multiple
                   :placeholder="'请输入' + item.title" filterable>
          <el-option v-for="f in item.options" :key="f.value" :label="f.label" :value="f.value"/>
        </el-select>
        <el-cascader ref="cascader" v-model="form[item.value]" :key="emptyReset"
                     v-else-if="item.type == 'area'&& !iscno && cj" :placeholder="'请输入' + item.title"
                     :props="classifyProps" @active-item-change="changetree($event,item.value)">
        </el-cascader>
        <el-input v-else-if="item.type == 'area'&&iscno" disabled v-model="item.data"></el-input>
        <!-- 树图 -->
        <BcTree v-else-if="item.type == 'tree'" ref="searchTree" :show-checkbox="false"
                :highlight-current=true :placeholder="'请选择'+item.title" :params="treeParams"
                :current-id="form[item.value]" @handleNodeClick="handleNodeClick" style="width: 300px"/>
        <div v-else-if="item.type == 'numberRange'" class="numberRange">
          <el-input onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" v-if='typeof form[item.value] == "object"'
                    v-model="form[item.value][0]" class="left_input"/>
          <span class="line">~</span>
          <el-input onkeyup="value=value.replace(/[^\d]/g,'')" v-if='typeof form[item.value] == "object"'
                    v-model="form[item.value][1]" class="right_input"/>
          <span class="line unit">{{ item.unit }}</span>
        </div>
        <div v-else-if="item.type == 'timeFormat'" class="numberRange">
          <el-time-picker
              is-range
              value-format="HH:mm:ss"
              class="timeFormat"
              :clearable="false"
              popper-class="timeFormat_wrap"
              v-model="form[item.value]"
              @focus="timeFormat"
              range-separator="~">
          </el-time-picker>
        </div>
        <!--级联选择器-->
        <div v-else-if="item.type == 'Cascader'">
          <el-cascader
              v-model="form[item.value]"
              @change="cascaderChange"
              :options="item.options"
              :props="item.props?{ checkStrictly: true,value:item.props.value, label: item.props.label,children: item.props.children} : { checkStrictly: true}"
              :clearable="false"
          />
        </div>
        <el-form-item v-else-if="item.type == 'slot'">
          <slot name="slot" :row="formData" :options="item.options?item.options:[]" :itemKey="item.key"/>
        </el-form-item>
      </el-form-item>
    </el-form>
    <div class="operationstyle">

      <el-button type="primary" @click="onSubmit"><img class="icon" src="../../assets/images/chaxun.png"/>
        <div class="text">查询</div>
      </el-button>
      <el-button @click="resetForm"><img class="icon" src="../../assets/images/chongzhi.png"/>
        <div class="text">重置</div>
      </el-button>
      <div class="expend" @click="expend()" v-if="showRest">
        <span>{{expendType==='expend' ? '展开全部' : '收起'}}</span>
        <svg-icon icon-class="arrowDown" class="arrows" :class="expendType==='expend' ? 'down' : 'up'"/>
      </div>
    </div>
  </div>
</template>
<script>
import {selectDeptLd, userselectItem} from '@/api/public'
import BcTree from '@/components/BcTree/index'

export default {
  name: 'SearchForm',
  components: {BcTree},
  props: {
    showRest:{
      type:Boolean,
      default: true
    },
    jdSearch:{
      type:Boolean,
      default: false
    },
    searchForm: {
      type: Array,
      default() {
        return []
      }
    },
    treeParams: {
      type: Object,
      default() {
        return {}
      }
    },
    deptid: {
      type: String,
      default: '1'
    },
    cj: {
      type: String,
      default: ''
    },
    pagecj: {
      type: String,
      default: '100'
    },
    iscno: {
      type: Boolean,
      default: false
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    benjiId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      classifyArr: [],
      formData: [],
      form: {},
      level: '',
      resolve: function () {
      },
      cascadervalue: '',
      emptyReset: 0,//所属区域选完再点重置按钮，级联选择器到最初始状态
      expendType: 'expend'
    }
  },
  watch: {
    searchForm: {
      handler: function (val) {
        this.formData = val
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    classifyProps() {
      let that = this
      return {
        checkStrictly: true,
        label: "departmentName",
        value: "departmentId",
        // emitPath:false,
        lazy: true,
        lazyLoad: this.getArea
      }
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    //展开，收起
    expend(){
      this.expendType = this.expendType === 'expend' ? 'packUp' : 'expend'
    },
    //时分秒范围
    timeFormat() {
      if (document.getElementsByClassName('timeFormat_wrap')[0]) {
        document.getElementsByClassName('timeFormat_wrap')[0].getElementsByClassName('el-time-range-picker__header')[0].innerHTML = '时分秒'
        document.getElementsByClassName('timeFormat_wrap')[0].getElementsByClassName('el-time-range-picker__header')[1].innerHTML = '时分秒'
      }
    },
    getArea(node, resolve) {
      if (node.level === 0) {
        selectDeptLd({parentId: this.deptid, cj: Number(this.cj) + 1}).then(res => {
          if (res.flag) {
            if (this.benjiId) {
              res.data.list.map((item, index) => {
                item.departmentId != this.benjiId ? delete res.data.list[index] : ''
              })

            }

            const arrs = res.data.list ? res.data.list : [];

            resolve([])
            resolve(arrs);
          }
        })
      } else if (node.data.departmentHierarchy == this.pagecj) {
        resolve([])
      } else {
        selectDeptLd({parentId: node.data.departmentId, cj: Number(node.data.departmentHierarchy) + 1}).then(res => {
          if (res.flag) {
            const arrs = res.data.list ? res.data.list : [];
            resolve([])
            resolve(arrs);
          }
        })
      }
    },
    changetree(val, key) {
      // this.form[key] = val
    },
    getoptiosarr2(resolve) {
      selectDeptLd({parentId: this.deptid, cj: Number(this.cj) + 1}).then(res => {
        if (res.flag) {
          const arrs = res.data.list ? res.data.list : [];
          resolve(arrs);
        }
      }).catch(r => {
        console.log('error', r);
      })
    },
    getoptiosarr(value, level, resolve) {
      selectDeptLd({parentId: value, cj: Number(level) + 1}).then(res => {
        if (res.flag) {
          const arrs = res.data.list ? res.data.list : [];
          resolve(arrs);
        }
      }).catch(r => {
        console.log('error', r);
      })
    },
    onSubmit() {
      this.$emit('search', this.form)
    },
    resetForm() {
      this.emptyReset = 1
      this.cascadervalue = ''
      if (this.$refs.searchTree) {
        this.$refs['searchTree'][0].changeFilterText();
        this.$emit('resetTree')
      }
      this.form = {}
      if(this.jdSearch){
        this.form = {}
        this.$set(this.form,'jdSearch',this.jdSearch) //是否需要重置状态和阶段
      }
      this.$emit('reset')
      this.$emit('search', this.form)

    },

    getfwlx(val, key) {
      this.$emit('getfwlx', val, key)
      this.$forceUpdate() //强制刷新
    },

    //树图节点点击事件
    handleNodeClick(data) {
      this.$emit('handleNodeClick', data)
    },

    //下拉搜索change事件
    selectChange(val, key) {
      let searchForm = this.form
      this.$emit('selectChange', {val, key, searchForm})
      this.$forceUpdate() //强制刷新
    },
    //级联选择器选择change事件
    cascaderChange(e){
      this.$emit('cascaderChange',e)
    },
  }
}
</script>
<style scoped lang="scss">
.samll_hieght{
  height: 80px;
  .demo-form-inline .el-form-item{
    margin-bottom: 56px;
  }
}
.big_height{
  height: auto;
  .demo-form-inline .el-form-item{
    margin-bottom: 27px;
  }
}
.search_wrap{
  display: flex;
  .operationstyle{
    padding-top: 26px;
    ::v-deep.el-button span{
      display: flex;
      line-height: 20px;
    }
    .expend{
      display: flex;
      float: right;
      margin-left: 15px;
      line-height: 40px;
      cursor: pointer;
      color: #1890ff;
      font-size: 15px;
      .arrows{
        margin: 10px 0 0 6px;
      }
      .up{
        transform: rotate(180deg);
      }
    }
    .icon{
      width: 20px;
      height: 20px;
    }
    .text{
      line-height: 20px;
    }
  }
}
.demo-form-inline {
  width: calc(100% - 310px);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  ::v-deep.el-form-item {
    display: flex;
    margin-bottom: 27px;
    width: 30%;
    .el-form-item__label {
      margin-right: 12px;
      width: 120px;
      text-align: right;
    }
    .el-form-item__content{
      width: calc(100% - 145px);
      .el-select{
        width: 100%;
      }
    }
  }

  .numberRange {
    display: flex;

    .el-input {
      width: 72px;
    }

    .left_input {
      ::v-deep.el-input__inner {
        border-radius: 4px 0 0 4px;
      }
    }

    .right_input {
      ::v-deep.el-input__inner {
        border-radius: 0;
      }
    }

    .time_right_input {
      ::v-deep.el-input__inner {
        border-radius: 0 4px 4px 0;
      }
    }

    .line {
      width: 43px;
      height: 36px;
      text-align: center;
      border-top: 1px solid #DCDFE6;
      border-bottom: 1px solid #DCDFE6;
    }

    .unit {
      width: 39px;
      height: 36px;
      text-align: center;
      border: 1px solid #DCDFE6;
      border-left: none;
      border-radius: 0 4px 4px 0;
    }
  }

  .timeFormat {
    width: 187px;

    ::v-deep.el-range__icon {
      display: none;
    }
  }

  .operationstyle {
    ::v-deep.el-form-item__content {
      display: flex;
    }

    ::v-deep.el-button {
      display: flex;
      padding: 0;
      width: 90px;
      height: 36px;
      line-height: 36px;

      span {
        display: flex;
      }

      .icon {
        margin: 7px 6px 0 16px;
        width: 20px;
        height: 20px;
      }

      .text {
        line-height: 36px;
      }
    }
  }
}

.btn-export {
  padding-top: 46px;
}

.btn-export div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 117px;
  height: 40px;
  border-radius: 6px;
  color: #59a3fe;
  border: 1px solid #59a3fe;
}

.btn-export img {
  width: 22px;
  height: 22px;
}

</style>
